<template>
	<view class="containner">
		<form  @submit="formSubmit">
		<view class="row">
			<text>姓名</text>
			<input class="input_" placeholder="请输入姓名" v-model="FormData.name"></input>
		</view>
		<view class="row">
			<text>联系电话</text>
			<input class="input_" placeholder="请输入电话" v-model="FormData.phone"></input>
		</view>
		<view class="row">
			<text>年龄</text>
			<input class="input_" placeholder="请输入年龄" v-model="FormData.age"></input>
		</view>
		<view class="row">
			<text>性别</text>
			<view class="picker-container">
			      <picker mode="selector" :range="genderArray" @change="onGenderChange">
			        <view class="picker">
			          {{selectedGender}}
			        </view>
			      </picker>
			</view>
		</view>
		<button form-type="submit">提交</button>
		</form>
	</view>

</template>

<script>
	export default {
		data(){
			return{
				FormData:{
					name:'',
					phone:'',
					age:'',
					gender:'',
				},
				 genderArray: ['男', '女'], // 性别选项数组
				      selectedGender: '请选择', // 当前选中的性别
			}
			
		},
		methods: {
		    onGenderChange(event) {
		      // 当选择器的值改变时触发
		      const selectedIndex = event.target.value;
		      this.selectedGender = this.genderArray[selectedIndex];
			  this.FormData.gender=this.selectedGender;
		    },
			formSubmit() {
				console.log(JSON.stringify(this.FormData));
					uni.showLoading({
						title:'提交中...',
						mask:true	
					})

					uni.request({
						url:'http://192.168.2.213:8086/shop/shop_inner',
						method:'POST',
						data:this.FormData,
						// 返回成功的结果
						success(res){
						console.log(res.data);
						
						let icon = 'none'; 
					if (res.data.code === 1) { 
					  icon = 'success';
					} else if (res.data.code === 0) { 
					  icon = 'error';
					}
						uni.hideLoading()
						uni.showToast({
							title:res.data.msg,
							duration:2000,
							icon:icon
						})											
						},
						fail() {
							uni.hideLoading()
						},
					})
			},
			
		  },

	}
	
</script>

<style>
	.container {
		display: flex;
		background-color: aquamarine;
	}

	.row {

		height: 50px;
		margin-top: 20px;
		display: flex;
		/* 设置为flex布局 */
		flex-direction: row;
		/* 子元素水平排布 */
		width: 100%;
		/* 可以根据需要调整宽度 */
	}
	
	.row text{
		width: 80px;
		margin-left: 10px;
		font-size: 16px;
	}


	.input_ {
		margin-left: 20px;
		flex-grow: 1;
		/* 输入框占据剩余空间 */
	}
	.picker-container {
	  display: flex;
	  align-items: center;
	}
	.picker {
	  margin-left: 10px;
	  margin-top: 5px;
	  height: 60px;
	  padding: 10px;
	  width: 60px;
	
	  border-radius: 5px;
	}
</style>
